//
//  HomeNavView.swift
//  iFishApp
//
//  Created by Bob on 2022/3/4.
//

import SwiftUI
import SDWebImageSwiftUI

struct HomeNavView: View {
    
    @EnvironmentObject var customTabbarVM: CustomTabbarViewModel
    
    @State var isActive: Bool = false
    
    var body: some View {
        VStack {
            // 签到、直播提示
            HStack {
                // 签到按钮
                Button {
                    
                } label: {
                    AnimatedImage(name: "home_sign.gif")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 46, height: 46)
                }
                
                Spacer()
                
                // 直播提示
                Button {
                    
                } label: {
                    ZStack(alignment: .bottom) {
                        Image("miyo")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 46, height: 46)
                            .cornerRadius(23)
                            .overlay(
                                RoundedRectangle(cornerRadius: 23)
                                    .stroke(Color.red, lineWidth: 4)
                            )
                        
                        // 文字提示
                        HStack {
                            Color.white.clipShape(Circle())
                                .frame(width: 5, height: 5)
                            Text("直播中")
                                .font(.system(size: 10, weight: .bold))
                                .foregroundColor(.white)
                        }
                        .background(
                            Capsule()
                                .fill(Color.red)
                                .frame(width: 50, height: 16)
                        )
                    }
                }
                
            }
            .overlay(
                HStack {
                    HomeNavBarBtn(tab: .attention)
                    HomeNavBarBtn(tab: .recommend)
                    HomeNavBarBtn(tab: .location)
                }
            )
            
            // 添加搜索框
            HStack {
                HStack {
                    Button {
                        
                    } label: {
                        Image("home_nav_search_qrcode")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .padding(.leading, 8)
                            .padding(.vertical, 5)
                    }
                    
                    // 分割线
                    Divider()
                        .foregroundColor(.black.opacity(0.3))
                        .frame(width: 1, height: 20)
                    
                    // 滚动热词
                    HStack {
                        HomeSearchHotKeywordView()
                            .background(Color.white)
                            .onTapGesture {
                                isActive.toggle()
                                customTabbarVM.atFront.toggle()
                            }
                        NavigationLink(destination: SearchResultView(), isActive: $isActive) {
                            
                        }
                    }
                    .padding(.horizontal, 10)
                    
                    // 搜索按钮
                    Button {
                        
                    } label: {
                        Text("搜索")
                            .font(.system(size: 15))
                            .frame(width: 60)
                            .frame(maxHeight: .infinity)
                            .background(Color.yellow)
                            .foregroundColor(.black.opacity(0.8))
                            .cornerRadius(20)
                    }
                    
                    
                }
                .frame(height: 40)
                .frame(maxWidth: .infinity)
                .overlay(
                    RoundedRectangle(cornerRadius: 20)
                        .stroke(Color.yellow, lineWidth: 2)
                )
                
                // 分类按钮
                Button {
                    
                } label: {
                    Image("home_nav_classify")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 45)
                }
            }
        }
        .padding(.horizontal, 10)
    }
}

struct HomeNavView_Previews: PreviewProvider {
    static var previews: some View {
        HomeNavView()
    }
}

enum HomeNavTab: Hashable {
    case attention
    case recommend
    case location
    
    var title: String {
        switch self {
        case .attention:
            return "关注"
        case .recommend:
            return "推荐"
        case .location:
            return "北京"
            
        }
    }
}

struct HomeNavBarBtn: View {
    @EnvironmentObject var locationMgr: LocationManager
    @EnvironmentObject var homeVM: HomeViewModel
    var tab: HomeNavTab
    
    var body: some View {
        Button {
            withAnimation { // 添加动画
                homeVM.curHomeNavTab = tab
            }
        } label: {
            ZStack(alignment: .trailing) {
                let cityName = (tab == .location && locationMgr.cityName != nil) ? locationMgr.cityName! : tab.title
                Text(cityName)
                    .font(.system(size: 16, weight: .bold))
                    .padding(.horizontal, 15)
                    .foregroundColor(Color.black.opacity(homeVM.curHomeNavTab == tab ? 0.7 : 0.3))
                // 选中标签缩放
                    .scaleEffect(homeVM.curHomeNavTab == tab ? 1.2 : 1)
                
                // 添加定位按钮
                if tab == .location {
                    Image(systemName: "chevron.down")
                        .font(.system(size: 8))
                        .foregroundColor(.black.opacity(0.4))
                        .opacity(homeVM.curHomeNavTab == tab ? 1 : 0)
                }
            }
            .foregroundColor(Color.black.opacity(homeVM.curHomeNavTab == tab ? 0.7 : 0.3))
        }
    }
}

